<template>
	<el-dialog v-model="_d.visible" draggable :close-on-click-modal="false" width="500px">
		<template #header>
			<div style="color: #fff">{{_d.record ? '编辑' : '添加'}}人员</div>
		</template>
	  <el-form :model="_d.form" ref="formRef" :rules="_d.rules" label-width="6em">
			<el-form-item label="名称" prop="name">
				<el-input v-model="_d.form.name" placeholder="请输入"/>
			</el-form-item>
			<el-form-item label="电话号码" prop="cellPhone">
				<el-input v-model="_d.form.cellPhone" placeholder="请输入"/>
			</el-form-item>
			<el-form-item label="身份证号" prop="identityId">
				<el-input v-model="_d.form.identityId" placeholder="请输入"/>
			</el-form-item>
			<el-form-item label="性别" prop="sex">
				<el-radio-group v-model="_d.form.sex">
		      <el-radio label="男">男</el-radio>
		      <el-radio label="女">女</el-radio>
		    </el-radio-group>
			</el-form-item>
			<el-form-item label="职位" prop="jobTitle">
				<el-input v-model="_d.form.jobTitle" placeholder="请输入"/>
			</el-form-item>
			<!-- <el-form-item label="是否是法人" prop="islegalperson">
				<el-radio-group v-model="_d.form.islegalperson">
		      <el-radio :label="true">是</el-radio>
		      <el-radio :label="false">否</el-radio>
		    </el-radio-group>
			</el-form-item> -->
			<el-form-item label="供应商" prop="providerId">
				<el-select v-model="_d.form.providerId" placeholder="请选择">
					<el-option v-for="item in _d.srvList"
						:key="item.id"
			      :label="item.companyName"
			      :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="描述" prop="description">
				<el-input v-model="_d.form.description" type="textarea" placeholder="请输入"/>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="_d.visible = false;">关 闭</el-button>
				<el-button type="primary" @click="save">确 认</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, onMounted } from 'vue';
import { ElNotification } from 'element-plus';
import {$post} from '/@/utils/request';
import {useUserInfo} from "/@/stores/userInfo.ts";
import {editRemoveKey} from "../template.js";
import {verifyPhone, verifyIdCard} from "/@/utils/toolsValidate.ts";

const emits = defineEmits(['reload']);

const oUserInfo = useUserInfo();
const formRef = ref();

const _d = reactive({
	visible: false,
	record: null,

	form: {
		name: '',
		identityId: '',
		cellPhone: '',
		sex: '男',
		jobTitle: '',
		islegalperson: false,
		providerId: null, // 供应商
		description: '',
	},

	rules: {
		name: [
			{ required: true, message: '名称不能为空', trigger: 'change'}
		],
		identityId: [
			{ trigger: 'change', validator: (rule, value, callback) => {
				if(value && !verifyIdCard(value)) {
					callback('请输入正确的身份证号');
				} else {
					callback();
				}
			}}
		],
		cellPhone: [
			{ required: true, trigger: 'change', validator: (rule, value, callback) => {
				if(!verifyPhone(value)) {
					callback('请输入正确的电话号码');
				} else {
					callback();
				}
			}}
		],
	},

	srvList: [], // 供应商列表

});

onMounted(async () => {
	
});

// 打开弹窗
const open = (record) => {
	_d.record = record || null;
	formRef.value?.resetFields();
	if(record) {
		for(let key in _d.form) {
			_d.form[key] = record[key];
		}
	}

	getSrvList();
	
	_d.visible = true;
};

// 获取供应商列表
const getSrvList = async () => {
	let res = await $post('/providerSrv/getprovider/0');
	_d.srvList = res.result;
}


// 保存
const save = () => {
	formRef.value.validate(async (valid) => {
		if (!valid) return;
		if(!_d.record) {
			addSave();
		} else {
			editSave();
		}
	})
}

const addSave = () => {
	let params = {
		..._d.form
	}
	$post('/personSrv/insproviderperson', params).then(res => {
		ElNotification({
	    title: '提示',
	    message: '添加成功',
	    type: 'success',
	  })
	  emits('reload');
	  _d.visible = false;
	})
}

const editSave = () => {
	let params = {
		id: _d.record.id,
		..._d.form
	}
	$post('/personSrv/modifyproviderperson', params).then(res => {
		ElNotification({
	    title: '提示',
	    message: '编辑成功',
	    type: 'success',
	  })
	  emits('reload');
	  _d.visible = false;
	})
}

// 导出对象
defineExpose({ open });

</script>
<style lang="scss" scoped>
.form-box {
	min-height: 150px;
}
</style>
